<script setup>
import { onMounted, reactive } from 'vue';

import { Image } from 'ant-design-vue';

import { customerDetail } from '#/api/hm/customer';

const props = defineProps({
  customerId: {
    type: String,
    default: '',
  },
});
const columns = [
  {
    title: '回款记录id',
    dataIndex: 'pickUpId',
    key: 'saleId',
  },
  {
    title: '所属订单',
    dataIndex: 'saleOrderId',
    key: 'saleOrderId',
  },
  {
    title: '回款金额 (元)',
    dataIndex: 'pickUpNum',
    key: 'pickUpNum',
  },
  {
    title: ' 回款时间',
    dataIndex: 'pickUpTime',
    key: 'pickUpTime',
  },
  {
    title: '证明材料',
    dataIndex: 'file',
    key: 'file',
  },
];
const data = reactive({
  refundNum: '', // 回款记录数量
  totalRefund: '', // 总回款金额
  totalDebt: '', // 总欠款金额
  refundList: [], // 回款记录列表
});
onMounted(async () => {
  handleOpenChange();
});
async function handleOpenChange() {
  const info = await customerDetail(props.customerId);
  console.log(info);
  data.refundNum = info.refundNum;
  data.totalRefund = info.totalRefund;
  data.totalDebt = info.totalDebt;
  data.refundList = info.refunds.rows;
}
</script>
<template>
  <div class="mb-4">
    该用户一共有
    <span class="text-blue-600">{{ data.refundNum }}</span>
    条回款记录，总回款金额
    <span class="text-blue-600">{{ data.totalRefund }}</span>
    元。 总欠款金额
    <span class="text-red-600">{{ data.totalDebt }}</span>
    元。
  </div>
  <div>
    <a-table
      :data-source="data.refundList"
      :columns="columns"
      :pagination="{ pageSize: 5 }"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'saleId'">
          <div class="text-blue-500">
            {{ text }}
          </div>
        </template>
        <template v-if="column.dataIndex === 'file'">
          <Image :src="text" height="50px" />
        </template>
      </template>
    </a-table>
  </div>
</template>
<style scoped>
.text-blue-600 {
  font-weight: 600;
  color: #2563eb;
}

.text-red-600 {
  font-weight: 600;
  color: #eb2535;
}
</style>
